<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
  .inputClass {
    width: 99%;
    height: 50px;
  }

  .solidClass {
    border: 1px solid silver
  }

  #innerDiv {
    padding-top: 10px;
    width: 60%;
    padding-left: 10px
  }

  .checkboxClass {
    padding-top: 12px;
    padding-left: 5px;
  }

  .buttonClass {
    background-color: mediumvioletred;
    border: 0px;
    border-radius: 5px
  }

  .spanClass {
    float: right;
    padding-right: 10px;
  }
</style>
<body>
<div style="padding-left: 30%;">
  <div id="innerDiv" class="solidClass">
    <!--Top-->
    <div>
      <input type="text" placeholder="  请输入需要需要添加的任务，按回车键提交" class="inputClass solidClass">
    </div>
    <p/>
    <!--center、items-->
    <div class="inputClass solidClass checkboxClass">
      <input type="checkbox"> Today is a good day!
      <span class="spanClass">
        <button class="buttonClass">删除已选中</button>
      </span>
    </div>
    <div class="inputClass solidClass checkboxClass">
      <input type="checkbox"> Today is a good day!
      <span class="spanClass">
        <button class="buttonClass">删除已选中</button>
      </span>
    </div>
    <div class="inputClass solidClass checkboxClass">
      <input type="checkbox"> Today is a good day!
      <span class="spanClass">
        <button class="buttonClass">删除已选中</button>
      </span>
    </div>
    <p/>
    <!--floor-->
    <div class="inputClass">
      <input type="checkbox"> 已完成：0/全部：1
      <span class="spanClass">
        <button class="buttonClass">清楚所有已完成任务</button>
      </span>
    </div>

  </div>
</div>
</body>
</html>
